<template>
<div class="putMaterial">    
    <el-row :gutter="20">
        <el-col :span="12">
            <div class="left" style="background:url('static/images/ggtf.jpg') no-repeat center;background-size:100% 100%">
              <div class="conmt">
                  <div class="upimg">
                        <img :src="dialogImageUrl" alt="">
                        <div  v-show="isShow1" class="rij">
                            <span>2</span>广告展示背景图
                        </div>
                  </div>
                  <div class="upicon">
                      <span v-bind:class="{ active: isActive }"><img src="static/images/ggtf14.png" alt=""></span>
                      <span v-bind:class="{ active: isActive1 }" v-show="isShow2"><img :src="dialogImageUrl2" alt=""></span>
                  </div>
              </div>  
        </div>
        </el-col>
        <el-col :span="12">
            <div class="advertising_icon advertising">
                <div class="left"><span>1</span></div>
                <div class="center">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="delete" @click="hise"><i class="el-icon-delete"></i></span>
                </div>
                <div class="right">
                        <h5>上传广告图标<span>＊</span></h5>
                        <p>图片尺寸要求176*99图片比例16:9</p>
                </div>
            </div>
            <div class="advertising_bg advertising">
                    <div class="left"><span>2</span></div>
                <div class="center">
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="delete" @click="hise2"><i class="el-icon-delete"></i></span>
                </div>
                <div class="right">
                        <h5>上传广告展示背景<span>＊</span></h5>
                        <p>图片尺寸要求1920*1080或1280*720  图片比例16:9</p>
                </div>
            </div>
            <div class="advertising_con advertising">
                <div class="left"><span>3</span></div>
                <div class="center">
                     <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess2"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <span class="delete"><i class="el-icon-delete"></i></span>
                </div>
                <div class="right">
                        <h5>上传广告内容<span>＊</span></h5>
                        <p>图片尺寸要求1920*1080或1280*720 图片比例16:9，最多上传3张</p>
                </div>
                <ul>
                    <li><img src="static/images/ggtf2.png" alt=""><span><i class="el-icon-close"></i></span></li>
                    <li><img src="static/images/ggtf3.png" alt=""><span><i class="el-icon-close"></i></span></li>
                    <li><img src="static/images/ggtf4.png" alt=""><span><i class="el-icon-close"></i></span></li>
                </ul>
            </div>
        </el-col>
    </el-row>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/js/swiper.min.js";
import "swiper/dist/css/swiper.min.css";


export default {

  data() {
    return {
      imageUrl: '',
      imageUrl1: '',
      imageUrl2: '',
      dialogVisible:'',
      isShow1:true,
      isShow2:false,
      dialogImageUrl2:'',
      isActive:'true',
      isActive1:'false',
    };
  },
  mounted() {
   
  },
  methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.dialogImageUrl = file.url;
        this.isShow1 = false;       
      },
       hise() {
       this.dialogImageUrl = '';
        this.isShow1 = true;
        this.imageUrl=''
      },
       handleAvatarSuccess1(res, file) {
        this.imageUrl1 = URL.createObjectURL(file.raw);
        this.dialogImageUrl2 = file.url;
        this.isShow2 = true;
        this.isActive = false;
        this.isActive1 = true;
      },
       hise() {
       this.imageUrl1 = '';
        this.dialogImageUrl2 = '';
        this.isShow2 = false;
        this.isActive = true;
        this.isActive1 = false;
      },
       handleAvatarSuccess2(res, file) {
        this.imageUrl2 = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  }
 
};
</script>
<style  rel="stylesheet/scss" lang="scss">
.putMaterial .advertising .center .avatar-uploader{
    width: 180px;
    .avatar{
        width: 178px;
    }
}

    .putMaterial {
        .upimg{
            width: 100%; 
            height: 100%;
            img{
                max-width: 100%;
                height: auto;
            }
            .rij{
                color: #ececec;
                font-size: 20px;
                text-align: center;
                margin-top: 22%;
                span{
                    display: inline-block;
                    width: 25px;
                    text-align: center;
                    height: 25px;
                    line-height: 25px;
                    background: #fff;
                    color: #ff5959;
                    border-radius: 50%;
                    font-size: 14px;
                    margin-right: 5px;
                    position: relative;
                    top: -2px;
                }
            }
        }
        .upicon{
            bottom: 10px;
             position: absolute;
             height: 40px;
            span{
                background: #fff;
                display: inline-block;
                border-radius: 4px;
                padding: 5px;
                width: 100px;
                text-align: center;
                float: left;
                margin-right: 10px;
                img{
                    display: inline-block;
                }
                &.active{
                    background: #ff5959;
                    padding:7px; 
                    bottom: 13px;position: relative;
                }
            }
        }
        .el-col{
            position: relative;
        }
        .left{
            height: 400px;
            .conmt{
                width: calc(100% - 76px);
                width: -webkit-calc(100% - 76px);
                height:  calc(100% - 68px);
                height:  -webkit-calc(100% - 68px);
                padding-top: 22px;
                margin-left: 38px;
                overflow: hidden;
                    position: relative;
            }
        }
        #thumbs{
            bottom: 70px;
            width: 100%;
            padding: 15px 0 5px;
            .swiper-slide{
                background: #fff;
                text-align: center;
                border-radius: 4px;
                padding:6px;
                box-sizing: border-box;
                img{
                    height: 27px;
                }
            }
            .swiper-slide-thumb-active{
                background: #ff5959;
                padding:10px; 
                top: -5px;
               img{
                    transform:scale(1.1);
               }
            }
        }
        #gallery{
            position: relative;
            height: 100%;
            width: 100%;
        }
        .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
            .avatar {
                width: 100px;
                height: 100px;
                display: block;
            }
            .advertising {
                display: inline-block;
                width: 100%;
                .left{
                    height: 100%;
                    width: 60px;
                    float: left;
                    margin-right: 10px;
                    margin-top: 30px;
                    span{
                        border-radius: 50%;
                        height: 50px;
                        line-height: 50px;
                        width: 50px;
                        text-align: center;
                        display: block;
                        	background-color: #ff8b00;
                            font-size: 21px;
                            color: #fff;
                    }
                }
                .center{
                    float: left;
                    margin-right: 37px;
                    width: 220px;
                    position: relative;
                    .delete{
                        display: inline-block;
                        width: 17px;
                        height: 17px;
                        cursor: pointer;
                        position: absolute;
                        top: calc(50% - 9px);
                        top: -webkit-calc(50% - 9px);
                        right: 0;
                        background: none;
                        &:hover{
                            color: #ff8b00;
                        }
                    }
                }
                .right{
                    width: calc(100% - 330px);
                    width: -webkit-calc(100% - 330px);
                    float: left;
                    h5{
                        font-size: 16px;
                        color: #3a3a3a;
                        margin-bottom: 5px;
                        span{
                            color: #ff3030;
                            background: none;
                        }
                    }
                    p{
                        color: rgba(139, 139, 139, 0.6);
                        font-size: 12px;
                    }
                }
                &.advertising_bg,&.advertising_con{
                    span{
                        background: #ececec;
                        	color: #a19c95;
                    }
                }
            }
        .advertising_con{
            ul{
                width: 100%;
                display: inline-block;
                padding-left: 70px;
                li{
                    display: inline-block;
                    margin-right:10px;
                    position: relative; 
                    span{
                        width: 22px;
                        height: 22px;
                        background: #ff4545 !important;
                        color: #fff !important;;
                        text-align: center;
                        line-height: 22px;
                        cursor: pointer;
                        position: absolute;
                        right: -11px;
                        top: -11px;
                        border-radius: 50%;

                    }
                }
            }
        }
    }
    @media screen and (max-width: 1400px){
        .putMaterial .left {
            height: 300px;
        }
        .putMaterial .left .conmt {
            width: calc(100% - 50px);
            width: -webkit-calc(100% - 50px);
            height: calc(100% - 50px);
            height: -webkit-calc(100% - 50px);
            padding-top: 13px;
            margin-left: 24px;
        }
    }
     @media screen and (max-width: 1400px){

     }
    @media screen and (max-width: 768px) {
        .putMaterial .el-col{width: 100%;}
        .putMaterial .advertising .left span {border-radius: 50%;height: 36px;line-height: 36px;width: 36px;}
        .putMaterial .advertising .left{width: 40px;}
        .putMaterial .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 141px;height: 90px;line-height: 90px}
        .putMaterial .advertising .center{width: 170px;}
        .putMaterial .upicon span{width: 50px;}
        .putMaterial .upicon{bottom: 0}
        .putMaterial .advertising .right h5{
            // text-align:left
        }  
    }
    @media screen and (max-width: 460px){
        .putMaterial .advertising .right{width: 100%;padding-left: 50px;margin-top: 5px}
        .putMaterial .left {height: 200px;}   
        .putMaterial .left .conmt {    width: calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    height: calc(100% - 34px);
    height: -webkit-calc(100% - 34px);
    padding-top: 8px;
    margin-left: 18px;}
    }
</style>

